<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
		<!-- Google Chrome Frame也可以让IE用上Chrome的引擎: -->
		<meta name="renderer" content="webkit">
		<!--国产浏览器高速模式-->
		<meta name="viewport" content="width=device-width, initial-scale=1">
	
		<!-- 定义页面的最新版本 -->
		<meta name="description" content="网站简介" />
		<!-- 网站简介 -->
		<meta name="keywords" content="搜索关键字，以半角英文逗号隔开" />
		<title>music</title>

		<!-- 公共样式 开始 -->
		<link rel="stylesheet" type="text/css" href="../../css/base.css">
		<link rel="stylesheet" type="text/css" href="../../css/iconfont.css">
		<script type="text/javascript" src="../../framework/jquery-1.11.3.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../../layui/css/layui.css">
		<script type="text/javascript" src="../../layui/layui.js"></script>
		<!-- 滚动条插件 -->
		<link rel="stylesheet" type="text/css" href="../../css/jquery.mCustomScrollbar.css">
		<script src="../../framework/jquery-ui-1.10.4.min.js"></script>
		<script src="../../framework/jquery.mousewheel.min.js"></script>
		<script src="../../framework/jquery.mCustomScrollbar.min.js"></script>
		<script src="../../framework/cframe.js"></script><!-- 仅供所有子页面使用 -->
		<!-- 公共样式 结束 -->
		
		<style>
			.layui-table img {
			    max-width: none;
			}
		</style>

	</head>
	<body>
<script type="text/html" id="music_del">
            <!--定义按钮-->
				<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
			    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>			
</script>
		<div class="cBody">
		<table class="layui-table" lay-filter="demo" id="music_list">		
			</table>
			
			
			<script>
				layui.use(['laypage','table','form','layer','upload'], function() {
					var laypage = layui.laypage,
					table = layui.table,
					layer = layui.layer,
					form = layui.form,
					upload = layui.upload;
				
					//第一个实例
 						 table.render({
   						 elem: '#music_list'
    					 ,height: 500
    					 ,method: 'post'
    					 ,url: "../../servlet/navigation_service"//数据接口
         		 		 ,where:{order:'music_listsel'}
    					 ,page: true //开启分页
    					 ,cols: [[ //表头
     					 {field: 'id', title: 'ID', width:100, sort: true, fixed: 'left'}
     					 ,{field: 'title', title: '歌名', width:200 }
     					 ,{field: 'author', title: '歌手', width:200 }
      					 ,{field: 'src', title: '链接', width:500 } 
     					 ,{field: 'delete', title: '操作', width: 135,toolbar:"#music_del" }
    							]]
    							   		});
//监听表单数据
  table.on('tool(demo)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
					var data = obj.data //获得当前行数据
						,data = obj.data//获得当前行数据
						,layEvent = obj.event; //获得 lay-event 对应的值
						var updataid="";
					if(layEvent === 'del'){
					//删除操作
						layer.confirm('真的删除歌名为【'+ data.title +'】的音乐么？',{btn: ['确定', '取消'],offset: 't',title:"提示"}, function(index){
							deluser(data,index,obj);
						});
						}else if(layEvent === 'edit'){
						//修改操作
								updataid=data.id;
								$.ajax({
        		 					type: "post",
         		 					url: "../../servlet/navigation_service",
         		 					data: {"order":"music_update_sel","music_id":data.id},
         		 					dataType: "json",
        		 					success: function(data){
        		 						layer.open({
				 					 title:'音乐修改',
				  					 type: 1,
				 					 skin: 'layui-layer-demo', //样式类名
				  					 closeBtn: 0, //不显示关闭按钮
				 					 anim: 2,
				 					 offset: '50px',
				  					 area: ['600px', '430px'],
				  					 shadeClose: true, //开启遮罩关闭
				  					 content: "<form  class='layui-form' id='updata_music_form'><div class='layui-form-item'>"+
				   						 "<label class='layui-form-label'>歌名</label>"+
				    					 "<div class='layui-input-block'>"+
				     			 		 "<input type='text'  required  lay-verify='required' placeholder='请输入歌名' autocomplete='off' class='layui-input' name='music_updata_title'>"+
					  					 "</div></div>"+
					 					 "<div class='layui-form-item'>"+
					  					 "<label class='layui-form-label'>歌手</label>"+
								 		 "<div class='layui-input-block'>"+
					   			 		 "<input type='text'  required  lay-verify='required' placeholder='请输入歌手名字' autocomplete='off' class='layui-input' name='music_updata_author'>"+
					   			 		 "</div></div>"+
					   			 		 "<div class='layui-form-item'>"+
				   						 "<label class='layui-form-label'>歌曲链接</label>"+
				    					 "<div class='layui-input-block'>"+
				     			 		 "<input type='text'  required  lay-verify='required' placeholder='请输入歌曲链接' autocomplete='off' class='layui-input' name='music_updata_src'>"+
					  					 "</div></div>"+
					  					  "<div class='layui-form-item'>"+
					  					 "<label class='layui-form-label'>pic链接</label>"+
				    					 "<div class='layui-input-block'>"+
				     			 		 "<input type='text'  required  lay-verify='required' placeholder='请输入pic链接' autocomplete='off' class='layui-input' name='music_updata_pic'>"+
					  					 "</div></div>"+
					  					 "<div class='layui-form-item'>"+
				   						 "<label class='layui-form-label'>歌词</label>"+
				    					 "<div class='layui-input-block'>"+
				     			 		 "<textarea  required lay-verify='required' class='layui-textarea' name='music_updata_lrc'></textarea>"+
					  					 "</div></div>"+
					   			 		 "<button type='button' class='layui-btn' id='music_updata_yes' lay-submit lay-filter='submitBut'>确定修改</button>"+
					   			 		 "<button type='reset' class='layui-btn' style='float:right;'>重置</button></form>"
										});
										$.each(data, function(i){
										$("[name='music_updata_title']").val(data[i].title);
										$("[name='music_updata_author']").val(data[i].author);
										$("[name='music_updata_pic']").val(data[i].pic);
										$("[name='music_updata_src']").val(data[i].src);
										$("[name='music_updata_lrc']").val(data[i].lrc);
										});		
									 }
  							});	//ajax end	
  							
				}
								//修改监听提交
								form.on('submit(submitBut)', function(data) {	
									$.ajax({
        		 						type: "post",
         		 						url: "../../servlet/navigation_service",
         		 						data: {"order":"music_update","id":updataid,"data":JSON.stringify(data.field)},
         		 						dataType: "text",
        		 						success: function(data2){
        		 						obj.update({
    										  title: data.field.music_updata_title
     										 ,src: data.field.music_updata_src
     										 ,author: data.field.music_updata_author
  												  });	
        		 						layer.closeAll();
        		 						layer.msg('修改成功', {icon:6});
        		 												}
										});//ajax end 							
										});	//form end						 
 //删除操作
 function deluser(data,index,obj){
					$.ajax({
						url: "../../servlet/navigation_service",    //这个是后台的路由地址
						type: "POST",
						data: {"order":"music_delete","id":data.id},//传给后台的值
						dataType: "json",
						success: function(data){
								//同步更新表格和缓存对应的值
								obj.del();
								layer.msg("删除成功", {icon: 6});
												}
							});
								 } //end
		});						   							   	
});				
			</script>
		</div>
	</body>

</html>